<template>
  <div class="top-head">
    <div class="wrapper head">
      <router-link to="/">
        <el-button style=" background-color: #008B8B;" round :class="{select_name:head.select===1}"
                   @click="head.select=(head.select===1)?'':1">主页
        </el-button>
      </router-link>
      <router-link to="/data">
        <el-button style=" background-color: #008B8B;" round :class="{select_name:head.select===2}"
                   @click="head.select=(head.select===2)?'':2">交流
        </el-button>
      </router-link>
      <router-link to="/articles">
        <el-button style=" background-color: #008B8B;" round :class="{select_name:head.select===4}"
                   @click="head.select=(head.select===4)?'':4">发表文章
        </el-button>
      </router-link>
      <router-link to="/login" v-show="!store.state.user.user_id">
        <el-button style=" background-color: #008B8B;" round :class="{select_name:head.select===3}" class="login"
                   @click="head.select=(head.select===3)?'':3">注册 / 登录
        </el-button>
      </router-link>
      <el-dropdown style="float: right;margin-top: -10px;">
        <router-link to="/user" v-show="store.state.user.user_id" >
          <el-avatar :size="50" :src="head.aliyunAvatar" @error="errorAvatar"/>
<!--          <span style="margin-left: 10px;">{{store.state.user.avatar}}</span>-->
        </router-link>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item><el-button type="text" @click="logout">退出登录</el-button></el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import head from "../api/header";
import login from "../api/login";
import {useStore} from "vuex"
import {useRouter} from "vue-router"

const router = useRouter()

const store = useStore()
head.aliyunAvatar = store.state.user.avatar

const errorAvatar = () => {
  head.aliyunAvatar = 'http://api.leleapi.cn:8000/uploads/'+ store.state.user.avatar.split('uploads/')[1]
}
const logout = () => {
  store.commit('logout')
  router.push('/login')
  login.is_register = false
}
</script>

<style>
.top-head {
  width: 100%;
  margin-top: 20px;
}

.head {
  border: 1px solid #008B8B;
  border-radius: 35px;
  padding: 10px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.el-button {
  width: 150px;
  height: 45px;

  a {
    color: black;
  }
}

.el-button:hover {
  a {
    color: black;
  }
}

.select_name {
  background-color: #fff !important;

  a {
    color: #008B8B !important;
  }
}

.login {
  float: right;
}
</style>

